<template>
    <div>
      <div class="bg-style">

        <div id="flowGraph5" style="width:100%;height: 800px;"></div>
        </div>
    </div>
</template>

<script>
import arrowImg from "../../../../assets/img/el-tree-img/arrow.png";
import arrowLeft from "../../../../assets/img/el-tree-img/arrowLeft.png";
import redArrow from "../../../../assets/img/el-tree-img/red-arrow.png";
import greenArrow from "../../../../assets/img/el-tree-img/left-arrow.png";
import bottomArrow from "../../../../assets/img/el-tree-img/red-bottom.png";
import rightArrow from "../../../../assets/img/el-tree-img/right-arrow.png"
import whiteArrow from "../../../../assets/img/el-tree-img/white-arrow.png"
export default {
  data() {
    return {};
  },
  mounted() {
    this.getEcharts2();
    // this.initCharts()
  },
  methods: {

    getEcharts2() {
      let myEcharts = this.$echarts.init(document.getElementById("flowGraph5"));
      let option = {
        title: {
          text: "Graph 简单示例"
        },

        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbol: "rect", //设置流程图中的图形形状，rect是长方体
            symbolSize: [120, 80],
            // roam: true,
            label: {
              show: true
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 10
            },
            data: [
              {
                name: "供水器",
                x: 470,
                y: 280,
                symbolSize: [80, 40]
                // value:"111"
              },
              {
                name: "1",
                x: 470,
                y: 220,
                symbolSize: 0
              },
              {
                name: "分水器",
                x: 435,
                y: 280,
                symbolSize: [80, 40]
              },

              //室内给水管通道------------------------
              {
                name: "室内给水管",
                x: 485,
                y: 310,
                symbolSize: [30, 30],
                symbol: "circle",
                label: {
                  fontSize: 7
                }
              },
              //室内给水管-24
              {
                name: 5 + "Xm²",
                x: 465,
                y: 310,
                layout: "force",
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/yellowPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: 7 + "Xm²",
                id: "p23",
                x: 300,
                y: 310,
                layout: "force",
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/yellowPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              //33-18
              {
                name: 300 + "Mpa",
                id: "p1",
                x: 315,
                y: 202,
                category: 1,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/bluePos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: 300 + "Mpa",
                id: "p2",
                x: 315,
                y: 207,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "bottom"
                }
              },

              {
                name: "24",
                x: 450,
                y: 310,
                symbolSize: [30, 30]
              },

              {
                name: "25",
                x: 450,
                y: 380,
                symbolSize: [30, 30]
              },

              {
                name: "水处理模块",
                x: 200,
                y: 380,
                symbolSize: [120, 60]
              },

              {
                name: "全自动软水器",
                x: 435,
                y: 310,
                symbolSize: [60, 60],
                label: {
                  fontSize: 10
                }
              },

              {
                name: "19",
                x: 395,
                y: 310,
                symbolSize: [30, 30],
                edgeLabel: {
                  fontSize: 14
                }
              },

              {
                name: "36",
                x: 330,
                y: 310,
                symbolSize: [30, 30],
                edgeLabel: {
                  fontSize: 14
                }
              },

              //室内给水管通道------------------------

              //一条线

              {
                name: "软水箱",
                x: 370,
                y: 290,
                symbolSize: [80, 60],
                edgeLabel: {
                  fontSize: 14
                }
              },
              {
                name: "系统水补水",
                x: 330,
                y: 290,
                symbolSize: [80, 60]
              },

              {
                name: "20",
                x: 395,
                y: 290,
                symbolSize: [30, 30],
                edgeLabel: {
                  fontSize: 14
                }
              },
              {
                name: "21",
                x: 330,
                y: 265,
                symbolSize: [30, 30]
              },
              {
                name: "22",
                x: 420,
                y: 265,
                symbolSize: [30, 30]
              },
              //一条线
              {
                name: "1电极锅炉",
                x: 105,
                y: 260,
                // symbolSize: [70, 50]
                symbolSize: 0
              },
              {
                name: "37",
                x: 110,
                y: 254,
                symbolSize: [30, 30]
                // symbolSize: 0
              },
              {
                name: "38",
                x: 110,
                y: 266,
                symbolSize: [30, 30]
                // symbolSize: 0
              },

              {
                name: "1电热锅换热器",
                x: 171,
                y: 260,
                symbolSize: 0
                // symbolSize: [70, 50]
              },
              {
                name: "39",
                x: 166,
                y: 254,
                // symbolSize: 0
                symbolSize: [30, 30]
              },
              {
                name: "40",
                x: 166,
                y: 266,
                // symbolSize: 0
                symbolSize: [30, 30]
              },

              //打点
              {
                name: 30 + "℃",
                id: "p7",
                x: 158,
                y: 254,
                // symbolSize: 0
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: 20 + "℃",
                id: "p8",
                x: 185,
                y: 254,
                // symbolSize: 0
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: [6, -15, 0, 0]
                }
              },

              {
                name: 202 + "℃",
                id: "p9",
                x: 158,
                y: 265,
                // symbolSize: 0
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: [-35, -10, 0, 0]
                }
              },
              {
                name: 201 + "℃",
                id: "p10",
                x: 185,
                y: 266,
                // symbolSize: 0
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: [6, -15, 0, 0]
                }
              },

              {
                name: "c1",
                x: 200,
                y: 266,
                symbolSize: [30, 30]
              },

              //标记
              {
                name: "49",
                x: 120,
                y: 266,
                symbolSize: [10, 10]
              },
              {
                name: "50",
                x: 120,
                y: 273,
                symbolSize: [10, 10]
              },
              {
                name: "51",
                x: 120,
                y: 280,
                symbolSize: [10, 10]
              },

              {
                name: "52",
                x: 156,
                y: 280,
                symbolSize: [10, 10]
              },
              {
                name: "53",
                x: 156,
                y: 273,
                symbolSize: [10, 10]
              },
              {
                name: "54",
                x: 156,
                y: 266,
                symbolSize: [10, 10]
              },

              {
                name: "56",
                x: 200,
                y: 215,
                symbolSize: [30, 30]
              },

              {
                name: "57",
                x: 210,
                y: 215,
                symbolSize: [10, 10]
              },

              {
                name: "58",
                x: 210,
                y: 200,
                symbolSize: [10, 10]
              },

              {
                name: "59",
                x: 235,
                y: 200,
                symbolSize: [10, 10]
              },
              {
                name: "60",
                x: 235,
                y: 215,
                symbolSize: [10, 10]
              },
              {
                name: "61",
                x: 235,
                y: 230,
                symbolSize: [10, 10]
              },
              {
                name: "62",
                x: 210,
                y: 230,
                symbolSize: [10, 10]
              },

              {
                name: "63",
                x: 245,
                y: 215,
                symbolSize: [10, 10]
              },
              {
                name: "64",
                x: 263,
                y: 215,
                symbolSize: [10, 10]
              },

              {
                name: "71",
                x: 263,
                y: 250,
                symbolSize: [10, 10]
              },

              {
                name: "72",
                x: 282,
                y: 250,
                symbolSize: [10, 10]
              },
              {
                name: "73",
                x: 282,
                y: 310,
                symbolSize: [10, 10]
              },

              {
                name: "65",
                x: 275,
                y: 215,
                symbolSize: [10, 10]
              },

              {
                name: "66",
                x: 300,
                y: 215,
                symbolSize: [10, 10]
              },
              {
                name: "67",
                x: 300,
                y: 207,
                symbolSize: [10, 10]
              },

              {
                name: "68",
                x: 300,
                y: 230,
                symbolSize: [10, 10]
              },

              {
                name: 301 + "℃",
                id: "p4",
                x: 315,
                y: 230,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "bottom"
                }
              },

              {
                name: "69",
                x: 245,
                y: 290,
                symbolSize: [10, 10]
              },

              {
                name: "蓄热水箱",
                x: 260,
                y: 290,
                symbolSize: [60, 40]
              },
              {
                name: "70",
                x: 275,
                y: 290,
                symbolSize: [10, 10]
              },

              {
                name: "蓄热组1泵",
                x: 222,
                y: 200,
                symbolSize: [70, 30]
              },
              {
                name: "蓄热组2泵",
                x: 222,
                y: 215,
                symbolSize: [70, 30]
              },
              {
                name: "蓄热组3泵",
                x: 222,
                y: 230,
                symbolSize: [70, 30]
              },

              {
                name: "换热循环管路1",
                x: 138,
                y: 273,
                symbolSize: [90, 18]
              },
              {
                name: "换热循环管路2",
                x: 138,
                y: 280,
                symbolSize: [90, 18]
              },

              {
                name: "29",
                x: 220,
                y: 254,
                symbolSize: [30, 30]
              },

              {
                name: "74",
                x: 290,
                y: 220,
                symbolSize: [20, 20]
              },

              {
                name: 200 + "Mpa",
                id: "p3",
                x: 315,
                y: 220,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/bluePos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "bottom"
                }
              },

              {
                name: "33",
                x: 290,
                y: 202,
                symbolSize: [20, 20]
              },
              {
                name: "26",
                x: 85,
                y: 380,
                symbolSize: [30, 30]
              },

              //27开始
              {
                name: "27",
                x: 85,
                y: 325,
                symbolSize: [30, 30]
              },

              {
                name: "41",
                x: 110,
                y: 319,
                symbolSize: [30, 30]
              },
              {
                name: "42",
                x: 110,
                y: 331,
                symbolSize: [30, 30]
              },

              {
                name: "45",
                x: 120,
                y: 331,
                symbolSize: [10, 10]
              },
              {
                name: "46",
                x: 120,
                y: 338,
                symbolSize: [10, 10]
              },
              {
                name: "47",
                x: 120,
                y: 345,
                symbolSize: [10, 10]
              },

              {
                name: "2电极锅炉",
                x: 105,
                y: 325,
                // symbolSize: [70, 50]
                symbolSize: 0
              },

              {
                name: "2电热锅换热器",
                x: 171,
                y: 325,
                // symbolSize: [70, 50]
                symbolSize: 0
              },

              {
                name: "换热循环管路3",
                x: 138,
                y: 338,
                symbolSize: [70, 18]
              },
              {
                name: "换热循环管路4",
                x: 138,
                y: 345,
                symbolSize: [70, 18]
              },

              {
                name: "34",
                x: 156,
                y: 338,
                symbolSize: [10, 10]
              },

              {
                name: "35",
                x: 156,
                y: 345,
                symbolSize: [10, 10]
              },
              {
                name: "48",
                x: 156,
                y: 331,
                symbolSize: [10, 10]
              },

              {
                name: "43",
                x: 166,
                y: 319,
                symbolSize: [30, 30]
              },

              {
                name: "p17" + "℃",
                id: "p17",
                x: 185,
                y: 319,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: "p18" + "℃",
                id: "p18",
                x: 185,
                y: 331,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: "p19" + "℃",
                id: "p19",
                x: 158,
                y: 331,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: "p20" + "℃",
                id: "p20",
                x: 158,
                y: 319,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },
              {
                name: "筒上水位\n" + 20 + "nm",
                id: "p21",
                x: 100,
                y: 325,
                symbolSize: [1, 1],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/redPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top",
                  distance: 50
                }
              },

              {
                name: "筒上水位\n" + 9 + "nm",
                id: "p22",
                x: 100,
                y: 325,
                symbolSize: [1, 1],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/yellowPos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "bottom",
                  distance: 50
                }
              },

              {
                name: "44",
                x: 166,
                y: 331,
                symbolSize: [30, 30]
              },

              {
                name: "55",
                x: 200,
                y: 331,
                symbolSize: [30, 30]
              },
              {
                name: "30",
                x: 220,
                y: 319,
                symbolSize: [30, 30]
              },

              {
                name: "31",
                x: 245,
                y: 319,
                symbolSize: [30, 30]
              },
              {
                name: "32",
                x: 290,
                y: 319,
                symbolSize: [30, 30]
              },

              //27结束

              {
                name: "28",
                x: 85,
                y: 260,
                symbolSize: [30, 30]
              },

              {
                name: "筒上水位\n" + 50 + "nm",
                id: "p11",
                x: 100,
                y: 260,
                symbolSize: [1, 1],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/yellowPos.png"),

                label: {
                  show: true,
                  color: "red",
                  position: "top",
                  distance: 40
                }
              },

              {
                name: "筒上水位\n" + 50 + "nm",
                id: "p12",
                x: 100,
                y: 260,
                symbolSize: [1, 1],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/yellowPos.png"),

                label: {
                  show: true,
                  color: "red",
                  position: "bottom",
                  distance: 40
                }
              },

              {
                name: "23",
                x: 420,
                y: 220,
                symbolSize: [10, 10]
              },

              {
                name: "供热循环1",
                x: 400,
                y: 190,
                symbolSize: [80, 25]
              },
              {
                name: "供热循环2",
                x: 400,
                y: 205,
                symbolSize: [80, 25]
              },
              {
                name: "供热循环3",
                x: 400,
                y: 220,
                symbolSize: [80, 25]
              },

              {
                name: "17",
                x: 335,
                y: 207,
                symbolSize: [20, 20]
              },
              {
                name: "18",
                x: 335,
                y: 202,
                symbolSize: [20, 20]
              },

              {
                name: 4343 + "Mpa",
                id: "p5",
                x: 350,
                y: 202,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/bluePos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              {
                name: "11",
                x: 335,
                y: 220,
                symbolSize: [20, 20]
              },

              {
                name: 123 + "Mpa",
                id: "p6",
                x: 350,
                y: 220,
                symbolSize: [10, 10],
                symbol:
                  "image://" +
                  require("../../../../assets/img/el-tree-img/bluePos.png"),
                itemStyle: {
                  color: "yellow"
                },
                label: {
                  show: true,
                  color: "red",
                  position: "top"
                }
              },

              //复杂线
              {
                name: "水泵间换热器1",
                x: 335,
                y: 205,
                // symbolSize: [60, 50],
                symbolSize: 0,
                label: {
                  fontSize: 9
                }
              },
              {
                name: "水泵间换热器2",
                x: 335,
                y: 225,
                // symbolSize: [60, 50],
                symbolSize: 0,
                label: {
                  fontSize: 9
                }
              },

              {
                name: "10",
                x: 435,
                y: 230,
                symbolSize: 0,
                symbolSize: [20, 20]
              },

              {
                name: "12",
                x: 335,
                y: 230,
                symbolSize: [20, 20]
              },
              {
                name: "15",
                x: 365,
                y: 230,
                // symbolSize: 0
                symbolSize: [20, 20]
              },

              {
                name: "2",
                x: 415,
                y: 220,
                symbolSize: [20, 20]
              },
              {
                name: "3",
                x: 385,
                y: 220,
                symbolSize: [20, 20]
              },
              {
                name: "4",
                x: 385,
                y: 190,
                symbolSize: [20, 20]
              },
              {
                name: "5",
                x: 415,
                y: 190,
                symbolSize: [20, 20]
              },
              {
                name: "6",
                x: 385,
                y: 205,
                symbolSize: [20, 20]
              },
              {
                name: "7",
                x: 415,
                y: 205,
                symbolSize: [20, 20]
              },
              {
                name: "8",
                x: 385,
                y: 180,
                symbolSize: [20, 20]
              },
              {
                name: "9",
                x: 415,
                y: 180,
                symbolSize: 0,
                symbolSize: [20, 20]
              },

              {
                name: "13",
                x: 375,
                y: 220,
                symbolSize: 0,
                symbolSize: [20, 20]
              },
              {
                name: "14",
                x: 375,
                y: 202,
                symbolSize: 0,
                symbolSize: [20, 20]
              },

              {
                name: "16",
                x: 365,
                y: 207,
                symbolSize: 0,
                symbolSize: [20, 20]
              }
            ],
            // links: [],
            links: [
              {
                source: "供水器",
                target: "1",
                symbol: "none",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  formatter: ["{a|}", "{b|一次性侧进水流}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: arrowImg,
                        borderColor: "#fff"
                      },
                      width: 25,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                },
                lineStyle: {
                  color: "green"
                }
              },
              {
                source: "1",
                symbol: "none",
                target: "11",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "供热循环3",
                symbol: "none",
                target: "换热器",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "2",
                symbol: "none",
                target: "9",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "5",
                symbol: "none",
                target: "供热循环1",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "供热循环1",
                symbol: "none",
                target: "4",
                lineStyle: {
                  color: "#76bb2d"
                }
              },

              {
                source: "33",
                symbol: "none",
                target: "p1"
              },
              {
                source: "67",
                symbol: "none",
                target: "p2"
              },
              {
                source: "3",
                symbol: "none",
                target: "8",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "8",
                symbol: "none",
                target: "9",
                lineStyle: {
                  color: "#76bb2d"
                }
              },

              {
                source: "供热循环2",
                symbol: "none",
                target: "6",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "供热循环2",
                symbol: "none",
                target: "7",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "10",
                symbol: "none",
                target: "分水器",
                lineStyle: {
                  color: "red"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "bottom",
                  formatter: ["{b|一次供水流向}", "{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: bottomArrow,
                        borderColor: "#fff"
                      },
                      width: 25,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },
              {
                source: "10",
                symbol: "none",
                target: "12",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "13",
                symbol: "none",
                target: "14",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "14",
                symbol: "none",
                target: "18",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "15",
                symbol: "none",
                target: "16",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "16",
                symbol: "none",
                target: "17",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "室内给水管",
                symbol: "none",
                target: "全自动软水器",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "全自动软水器",
                symbol: "none",
                target: "19",
                lineStyle: {
                  color: "#0196ca"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  formatter: ["{a|}", "{b|软化水\n供水流向}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: arrowLeft,
                        borderColor: "#fff"
                      },
                      width: 35,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },
              {
                source: "19",
                symbol: "none",
                target: "20",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "20",
                symbol: "none",
                target: "系统水补水",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "系统水补水",
                symbol: "none",
                target: "21",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "21",
                symbol: "none",
                target: "22",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "22",
                symbol: "none",
                target: "23",
                lineStyle: {
                  color: "#0196ca"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "bottom",
                  formatter: ["{b|系统水\n补水流向}", "{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: rightArrow,
                        borderColor: "#fff"
                      },
                      width: 25,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },
              {
                source: "24",
                symbol: "none",
                lineStyle: {
                  color: "#0196ca"
                },
                target: "25"
              },
              {
                source: "25",
                symbol: "none",
                target: "水处理模块",
                lineStyle: {
                  color: "#0196ca"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "bottom",
                  formatter: ["{b|自来水供水流向}", "{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: arrowLeft,
                        borderColor: "#fff"
                      },
                      width: 55,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },
              {
                source: "水处理模块",
                symbol: "none",
                target: "26",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "26",
                symbol: "none",
                target: "28",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "27",
                symbol: "none",
                target: "2电极锅炉",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "28",
                symbol: "none",
                target: "1电极锅炉",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "39",
                symbol: "none",
                target: "29",
                lineStyle: {
                  color: "red"
                }
              },

              {
                source: "43",
                symbol: "none",
                target: "30",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "29",
                symbol: "none",
                target: "30",
                lineStyle: {
                  color: "red"
                }
              },

              {
                source: "30",
                symbol: "none",
                target: "32",
                lineStyle: {
                  color: "red"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  distance: -30,
                  formatter: ["{a|}", "{b|二次侧\n供水流向}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: redArrow,
                        borderColor: "#fff"
                      },
                      width: 170,
                      height:10
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },

              {
                source: "32",
                symbol: "none",
                target: "33",
                lineStyle: {
                  color: "red"
                }
              },

              {
                source: "33",
                symbol: "none",
                target: "18",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "34",
                symbol: "none",
                target: "35"
              },
              {
                source: "34",
                symbol: "none",
                target: "换热循环管路3"
              },
              {
                source: "35",
                symbol: "none",
                target: "换热循环管路4"
              },
              {
                source: "19",
                symbol: "none",
                target: "36",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "36",
                symbol: "none",
                target: "系统水补水",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "37",
                symbol: "none",
                target: "39"
              },
              {
                source: "42",
                symbol: "none",
                target: "45"
              },
              {
                source: "45",
                symbol: "none",
                target: "47"
              },
              {
                source: "46",
                symbol: "none",
                target: "换热循环管路3"
              },
              {
                source: "47",
                symbol: "none",
                target: "35",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  distance:-30,
                  formatter: ["{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: whiteArrow,
                        borderColor: "#fff"
                      },
                      width: 60,
                      height: 26
                    }
                  }
                }
              },
              {
                source: "34",
                symbol: "none",
                target: "48"
              },
              {
                source: "48",
                symbol: "none",
                target: "44"
              },
              {
                source: "41",
                symbol: "none",
                target: "43"
              },
              {
                source: "49",
                symbol: "none",
                target: "51"
              },
              {
                source: "38",
                symbol: "none",
                target: "49"
              },
              {
                source: "51",
                symbol: "none",
                target: "52",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  distance:-30,
                  formatter: ["{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: whiteArrow,
                        borderColor: "#fff"
                      },
                      width: 60,
                      height: 26
                    }
                  }
                }
              },

              {
                source: "52",
                symbol: "none",
                target: "54"
              },
              {
                source: "54",
                symbol: "none",
                target: "40"
              },
              {
                source: "44",
                symbol: "none",
                target: "55",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "55",
                symbol: "none",
                target: "56",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "56",
                symbol: "none",
                target: "66",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "58",
                symbol: "none",
                target: "62",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "58",
                symbol: "none",
                target: "59",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "59",
                symbol: "none",
                target: "61",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "62",
                symbol: "none",
                target: "61",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "31",
                symbol: "none",
                target: "63",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "66",
                symbol: "none",
                target: "60",
                lineStyle: {
                  color: "#76bb2d"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "bottom",
                  formatter: ["二次侧回水流向", "{a|}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: greenArrow,
                        borderColor: "#fff"
                      },
                      width: 85,
                      height:30,
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              },
              {
                source: "66",
                symbol: "none",
                target: "67",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "67",
                symbol: "none",
                target: "17",
                lineStyle: {
                  color: "#76bb2d"
                }
              },

              {
                source: "66",
                symbol: "none",
                target: "68",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "68",
                symbol: "none",
                target: "12",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "69",
                symbol: "none",
                target: "蓄热水箱",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "蓄热水箱",
                symbol: "none",
                target: "70",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "70",
                symbol: "none",
                target: "65",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "64",
                symbol: "none",
                target: "71",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "71",
                symbol: "none",
                target: "72",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "72",
                symbol: "none",
                target: "73",
                lineStyle: {
                  color: "#0196ca"
                }
              },
              {
                source: "74",
                symbol: "none",
                target: "11",
                lineStyle: {
                  color: "red"
                }
              },

              {
                source: "74",
                symbol: "none",
                target: "p3",
                lineStyle: {
                  color: "red"
                }
              },
              {
                source: "68",
                symbol: "none",
                target: "p4",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "18",
                symbol: "none",
                target: "p5",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "11",
                symbol: "none",
                target: "p6",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "50",
                symbol: "none",
                target: "53"
              },
              {
                source: "40",
                symbol: "none",
                target: "p10",
                lineStyle: {
                  color: "#76bb2d"
                }
              },
              {
                source: "1电级锅炉",
                symbol: "none",
                target: "p7"
              },
              {
                source: "1电级锅炉",
                symbol: "none",
                target: "p8"
              },
              {
                source: "40",
                symbol: "none",
                target: "p9"
              },
              {
                source: "c1",
                symbol: "none",
                target: "p10",
                lineStyle: {
                  color: "#76bb2d"
                }
              },

              {
                source: "73",
                symbol: "none",
                target: "36",
                lineStyle: {
                  color: "#0196ca"
                },
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 14,
                  verticalAlign: "top",
                  formatter: ["{a|}", "{b|系统水\n补水流向}"].join("\n"),
                  rich: {
                    a: {
                      backgroundColor: {
                        image: arrowLeft,
                        borderColor: "#fff"
                      },
                      width: 35,
                      height: 30
                    },
                    b: {
                      color: "#fff"
                    }
                  }
                }
              }
            ],

            lineStyle: {
              opacity: 3.9,
              width: 2,
              curveness: 0
            },
            markLine: {
              symbol: "none" //去除线箭头
            }
          }
        ]
      };
      myEcharts.setOption(option);
    }
  }
};
</script>

<style>
.bg-style {
  background: url("../../../../assets/img/bg.jpg");
  background-size: 100% 100%;
  padding: 10px;
  height: 100;
}
</style>
